<template>
	<view class="pages">
		<view class="goods-box" v-if="details.name">
			<view class="goods">
				<image :src="details.pic[0]" mode="aspectFill"></image>
				<view>
					<view class="t1">
						{{details.name}}
					</view>
					<view class="t2">项目时长：{{details.duration}}分钟</view>
					<view class="price">
						<text>¥{{details.price}}</text>
						<u-number-box @change="valChange"
						input-width="40"
						input-height="40"
						class="left-auto"
						v-model="form.number" 
						:min="1" 
						:max="100" 
						disabled-input
						bg-color="#007664"
						color="#fff"></u-number-box>
					</view>
				</view>
			</view>
		</view>
		<view class="card-box" v-if="details.name">
			<view class="card-zi"  style="border-bottom: 1px solid hsla(0, 0%, 56%, 0.24);">
				<text>优惠券</text>
				<text class="" v-if="couponList.length && !couponInfo" @click="showCoupon = true">{{couponList.length}}张可用</text>
				<view class="" v-if="couponList.length && couponInfo"  @click="showCoupon = true">
					<text class="" v-if="couponInfo.couponPool.off_type == 0">
						减{{Number(couponInfo.couponPool.face_value).toFixed(2)}}
					</text>
					<text class="" v-if="couponInfo.couponPool.off_type == 1">
						{{couponInfo.couponPool.discount}}折，最大折扣{{Number(couponInfo.couponPool.max_discount).toFixed(2)}}
					</text>
				</view>
				<text class="noCoupon" v-if="!couponList.length">没有可用优惠券</text>
			</view>
			<view class="card-zi" v-if="userInfo.vip_id >= 1">
				<text>会员卡</text>
				<text class="">{{userInfo.vip_no}}</text>
			</view>
		</view>
		<view class="card-box" v-if="details.name">
			<view class="card-zi" >
				<text>商品总价</text>
				<text class="price">¥{{Number(salsePrice).toFixed(2)}}</text>
			</view>
			<view class="card-zi" v-if="form.coupon_id">
				<text>优惠券优惠</text>
				<text class="price">¥{{Number(couponPrice).toFixed(2)}}</text>
			</view>
			<view class="card-zi" v-if="userInfo.vip_id >= 1">
				<text>会员卡优惠</text>
				<text class="price" v-if="form.coupon_id">¥ 0.00</text>
				<text class="price" v-else>¥{{Number(discountAmount).toFixed(2)}}</text>
			</view>
		</view>
		<u-popup v-model="show1" safe-area-inset-bottom border-radius="34" closeable mode="bottom">
			<view class="select-pay">
				<view class="title">请选择支付方式</view>
				<view class="select" v-for="(item,i) in pay" :key="item" @click="payIndex=i">
					<image :src="item.img" mode="aspectFill"></image>
					<view>{{item.title}}</view>
					<view :class="payIndex==i?'icon-a-xingzhuang1':'icon-weixuanzhong'" class="iconfont left-auto"></view>
				</view>
				<view class="price-box">
					金额：
					<text>¥{{Number(totalPrice).toFixed(2)}}</text>
					<view class="btn" @click="submit()">支付</view>
				</view>
			</view>
		</u-popup>
		<!-- 选择可用优惠券 -->
		<u-popup v-model="showCoupon" safe-area-inset-bottom border-radius="34" closeable mode="bottom">
			<view class="chioseTitle">选择优惠券</view>
			<scroll-view scroll-y="true" style="max-height: 600rpx;">
				<view class="couponList" v-if="couponList.length">
					<view class="list" v-for="(ele,index) in couponList" :key="index">
						<image src="https://willmid-img.oss-cn-shanghai.aliyuncs.com/2021/09/10/2x-2.png" mode=""></image>
						<view class="couponContent">
							<view class="left">
								<view class="couponL" v-if="ele.couponPool.off_type == 0">
									<view class="price">￥<text>{{Number(ele.couponPool.face_value).toFixed(2)}}</text></view>
									<view class="fullReduction">满{{Number(ele.couponPool.min_value).toFixed(2)}}元可用</view>
								</view>
								<view class="couponL" v-else>
									<view class="price"><text>{{ele.couponPool.discount}}</text>折</view>
									<view class="fullReduction">最大折扣{{Number(ele.couponPool.max_discount).toFixed(2)}}</view>
								</view>
								<view class="couponM">
									<view class="t1">{{ele.couponPool.title}}({{getStausText(ele.couponPool.coupon_scope_use_id)}})</view>
									<view class="t2">有效期：{{$u.timeFormat(ele.couponPool.start_time, 'yyyy-mm-dd')}}至{{$u.timeFormat(ele.couponPool.end_time,'yyyy-mm-dd')}}</view>
								</view>
							</view>
							<view class="couponR">
								<view @click="chioseCoupon(ele,index)" class="iconfont icon" :class="ele.isCheck ? 'icon-a-xingzhuang1' : 'icon-weixuanzhong' "></view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</u-popup>
		<view class="bottom-buy " v-if="details.name">
			<view class="total-price">
				合计：
				<text>¥{{Number(totalPrice).toFixed(2)}}</text>
			</view>
			<view @click="show1=true" class="btn-ho left-auto">支付</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				couponInfo:"",//优惠券信息
				showCoupon:false,
				couponList:[],//优惠券列表
				form:{
					project_id:'',
					store_id:'',
					number:1,
					coupon_id:'',
					is_vip:''
				},
				details:{},
				peoject_id:'',
				num:1,
				show1:false,
				payIndex:0,
				discountAmount:0,
				couponPrice:0,
				salsePrice:0,
				totalPrice:0,
				oldPrice:0,
				isSubmit:false,
				pay:[{
					img:'https://willmid-img.oss-cn-shanghai.aliyuncs.com/2021/09/13/2x.png',
					title:'会员卡支付',
				}]
			};
		},
		async onLoad({peoject_id}) {
			this.peoject_id = peoject_id
			await this.getDetails()
		},
		methods:{
			async submit(){
				if(this.isSubmit)return
				this.isSubmit = true
				this.form.project_id = this.peoject_id
				this.form.store_id = this.store_id
				if(this.userInfo.vip_id >= 1){
					this.form.is_vip = this.form.coupon_id ? 0: 1
				}else{
					this.form.is_vip = 0
				}
				console.log(this.form,"this.formthis.formthis.form")
				let {code,data} = await this.$u.api.buyProject(this.form);
				this.isSubmit = false
				if(code){
					if(this.share_project_id){
						if(this.share_project_id == this.peoject_id){
							this.$u.vuex("share_user_id","")
						}
					}
					uni.navigateTo({
						url:`../mine/submitSuccess?type=6`
					})
				}
			},
			valChange(val){
				this.form.number = val.value
				// 优惠券重新计算
				let totalPrice
				if(this.form.coupon_id){
					totalPrice = this.details.price * this.form.number
					if(this.couponInfo.couponPool.off_type == 1){
						// 获取折扣后价格
						let price = Number(totalPrice * (this.couponInfo.couponPool.discount / 10)).toFixed(2)
						//计算差价是否超过100
						let diffPrice = totalPrice - price
						console.log(totalPrice,price,diffPrice,"dsds")
						if(diffPrice < this.couponInfo.couponPool.max_discount*1){
							this.totalPrice = totalPrice - diffPrice 
							this.couponPrice = diffPrice
						}else{
							this.totalPrice = totalPrice -  this.couponInfo.couponPool.max_discount*1
							this.couponPrice = this.couponInfo.couponPool.max_discount*1
						}
						if(this.totalPrice<0){
							this.totalPrice = 0
						}
					}else{
						// 满减
						this.totalPrice = totalPrice - this.couponInfo.couponPool.face_value *1
						this.couponPrice = this.couponInfo.couponPool.face_value
						if(this.totalPrice<0){
							this.totalPrice = 0
						}
					}
				}else{
					if(this.userInfo.vip_id >= 1 ){
						totalPrice = this.details.vip_price * this.form.number
					}else{
						totalPrice = this.details.price * this.form.number
					}
					let price = this.details.price * this.form.number
					let vipPrice = this.details.vip_price * this.form.number
					this.discountAmount = price*1 - vipPrice*1
					this.totalPrice = totalPrice
					this.oldPrice = totalPrice
					this.salsePrice = this.details.price * this.form.number
				}
				console.log(totalPrice,this.form.number)
			},
			getStausText(val){
				switch(val){
					case 0 :
					return '通用券'
					case 1 :
					return '商品券'
					case 2 :
					return '项目券'
				}
			},
			// 获取优惠券列表
			async getCouponList(){
				let {code,data} = await this.$u.api.getCoupon({store_id:this.store_id,coupon_scope_use_id:2});
				if(code){
					let arr = []
					data.forEach((ele)=>{
						ele.isCheck = false
						if(ele.couponPool.off_type == 0){
							let price = Number(this.oldPrice)
							if(price > ele.couponPool.min_value){
								arr.push(ele)
							}
						}else{
							arr.push(ele)
						}
					})
					this.couponList = arr
				}
			},
			// 选择要使用的优惠券
			chioseCoupon(ele,index){
				this.couponList.forEach((ele,index1)=>{
					if(index != index1){
						ele.isCheck = false
					}else{
						
						ele.isCheck = !ele.isCheck
					}
				})
				if(ele.isCheck){
					this.couponInfo = ele
					this.form.coupon_id = this.couponInfo.id
					let totalPrice = this.details.price * this.form.number
					if(ele.couponPool.off_type == 1){
						// 获取折扣后价格
						let price = Number(totalPrice * (ele.couponPool.discount / 10)).toFixed(2)
						//计算差价是否超过100
						let diffPrice = totalPrice - price
						console.log(totalPrice,price,diffPrice,"dsds")
						if(diffPrice < ele.couponPool.max_discount*1){
							this.totalPrice = totalPrice - diffPrice 
							this.couponPrice = diffPrice
						}else{
							this.totalPrice = totalPrice -  ele.couponPool.max_discount*1 
							this.couponPrice = ele.couponPool.max_discount*1
						}
						if(this.totalPrice<0){
							this.totalPrice = 0
						}
					}else{
						this.totalPrice = totalPrice - ele.couponPool.face_value *1
						this.couponPrice = ele.couponPool.face_value
						if(this.totalPrice<0){
							this.totalPrice = 0
						}
					}
				}else{
					this.form.coupon_id = ""
					this.couponInfo = ""
					this.totalPrice = this.oldPrice
				}
				console.log(this.couponInfo)
				this.showCoupon = false
			},
			// 获取订单详情
			async	getDetails(){
				let {code,data} = await this.$u.api.getProject({id:this.peoject_id,store_id:this.store_id});
				data.pic = data.pic.split(",")
				this.details = data
				let price = this.details.price
				let vipPrice = this.details.vip_price
				this.discountAmount = price*1 - vipPrice*1
				this.salsePrice = this.details.price
				if(this.userInfo.vip_id >= 1){
					this.totalPrice = this.details.vip_price
					this.oldPrice = this.details.vip_price
				}else{
					this.totalPrice = this.details.price
					this.oldPrice = this.details.price
				}
				this.getCouponList()
			},
		}
	}
</script>

<style>
	page{
		background-color: #F6F7FA;
	}
</style>
<style lang="scss" scoped>
.pages{
	padding: 32rpx;
	.icon-a-xingzhuang1{
		color: rgba(209,184,125,1) !important;
	}
	.couponList{
		.list{
			width: 686rpx;
			height: 161rpx;
			position: relative;
			margin-bottom: 30rpx;
			image{
				width: 686rpx;
				height: 161rpx;
				position: absolute;
				top: 0;
			}
			.couponContent{
				width: 686rpx;
				height: 161rpx;
				position: absolute;
				top: 0;
				z-index: 1;
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
				padding: 26rpx 34rpx 31rpx  50rpx;
				.left{
					display: flex;
					.couponL{
						color: #007664;
						margin-right: 52rpx;
						.price{
							font-size: 22rpx;
							line-height: 74rpx;
							text{
								font-size: 53rpx;
							}
						}
						.fullReduction{
							font-size: 22rpx;
						}
					}
					.couponM{
						.t1{
							color: #333333;
							font-size: 24rpx;
							margin-bottom: 14rpx;
							line-height: 33rpx;
							margin-top: 20rpx;
						}
						.t2{
							color: #666666;
							font-size: 17rpx;
						}
					}
				}
				.couponR{
					width: 104rpx;
					border-left: 2rpx dashed rgba(207,11,43,.3);
					height: 137rpx;
					position: relative;
					.icon{
						position: absolute;
						right: 0;
						top: 50%;
						transform: translateY(-50%);
						font-size: 42rpx;
						color: #979797;
					}
				}
			}
		}
	}
	.chioseTitle{
		text-align: center;
		margin-top: 40rpx;
		color: #333333;
		font-size: 30rpx;
		margin-bottom: 30rpx;
	}
	.goods-box{
		.goods{
			display: flex;
			margin-bottom: 30rpx;
			background: #ffffff;
			border-radius: 20rpx;
			image{
				width: 214rpx;
				height: 214rpx;
				border-radius: 10rpx;
			}
			>view{
				flex: 1;
				padding: 30rpx ;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}
			.t1{
				display: flex;
				font-size: 26rpx;
				font-weight: 400;
				text-align: left;
				color: #071529;
				line-height: 37rpx;
				text{
					font-size: 20rpx;
					font-weight: 400;
					text-align: right;
					color: #999999;
					line-height: 28rpx;
				}
			}
			.t2{
				font-size: 20rpx;
				font-family: Helvetica;
				text-align: left;
				color: hsla(215, 71%, 9%, 0.5);
				line-height: 24rpx;
			}
			.price{
				display: flex;
				align-items: center;
				text{
					font-size: 24rpx;
					font-weight: 400;
					color: #007664;
					text-align: right;
					line-height: 33rpx;
					letter-spacing: 1px;
				}
				.make{
					font-size: 24rpx;
					font-weight: 400;
					color: #007664;
					line-height: 33rpx;
					letter-spacing: 1px;
					margin-right: 18rpx;
				}
				.buy{
					width: 93rpx;
					height: 49rpx;
					background: #d5bc81;
					border-radius: 8rpx;
					font-size: 24rpx;
					font-weight: 400;
					text-align: center;
					color: #ffffff;
					line-height: 49rpx;
					letter-spacing: 1px;
				}
			}
		}
		
	}
	.card-box{
		background: #ffffff;
		border-radius: 8rpx;
		padding: 0 32rpx;
		margin-bottom: 32rpx;
		.card-zi{
			height: 96rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			text{
				font-size: 26rpx;
				font-weight: 400;
				text-align: left;
				color: #333333;
				line-height: 26rpx;
			}
			.hui{
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
				line-height: 26rpx;
			}
			.price{
				font-size: 24rpx;
				font-weight: 400;
				color: #007664;
				line-height: 26rpx;
			}
			.noCoupon{
				color: #999999;
				font-size: 24rpx;
			}
		}
	}
	.select-pay{
		padding: 40rpx 43rpx;
		.title{
			font-size: 26rpx;
			font-weight: 400;
			color: #999999;
			line-height: 37rpx;
			margin-bottom: 38rpx;
		}
		.select{
			display: flex;
			align-items:center;
			margin-bottom: 36rpx;
			font-size: 28rpx;
			font-weight: 400;
			text-align: left;
			color: #333333;
			line-height: 40rpx;
			image{
				width: 40rpx;
				height: 40rpx;
				margin-right: 12rpx;
			}
			.iconfont{
				padding: 10rpx 20rpx;
			}
			.icon-a-xingzhuang1{
				color: rgba(209,184,125,1);
			}
		}
		.price-box{
			border-top: 1px solid #d8d8d8;
			padding-top: 50rpx;
			display: flex;
			align-items: center;
			font-size: 30rpx;
			font-weight: 400;
			text-align: left;
			color: #666666;
			line-height: 42rpx;
			text{
				font-size: 30rpx;
				font-weight: 400;
				text-align: left;
				color: #007664;
				line-height: 42rpx;
			}
			.btn{
				margin-left: auto;
				width: 236rpx;
				height: 70rpx;
				background: #007664;
				border-radius: 6rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #ffffff;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
	.bottom-buy{
		z-index: 99;
		box-shadow: 0px 0px 13rpx 0px rgba(110,126,189,0.18); 
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		// @if env(safe-area-inset-bottom)!=0{
		// 	padding: 35rpx 35rpx env(safe-area-inset-bottom);
		// }@else{
			padding: 35rpx;
		// }
		display: flex;
		align-items: center;
		background-color: #fff;
		.total-price{
			font-size: 30rpx;
			text-align: left;
			color: #666666;
			line-height: 42rpx;
			text{
				font-size: 30rpx;
				font-weight: 400;
				color: #007664;
				line-height: 42rpx;
			}
		}
		.btn-bai{
			width: 174rpx;
			height: 70rpx;
			border: 1px solid #007664;
			border-radius: 6rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #007664;
			display: flex;
			justify-content: center;
			align-items: center;
			// text-align: center;
			// line-height: 70rpx;
		}
		.btn-ho{
			width: 236rpx;
			height: 70rpx;
			background: #007664;
			border-radius: 6rpx;
			font-size: 28rpx;
			font-weight: 400;
			color:#ffffff;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}
::v-deep .u-icon-minus{
		background: #ededed !important;
		color: #b9b9b9!important;
	}
</style>
